<!--  -->
<template>
  <div>
    <header-top clickLeftTo="/search" clickRightTO="/login">
      <template #left>
        <span class="iconfont icon-sousuo-copy"></span>
      </template>
      <template #middle>河北石家庄晋州市</template>
      <template #right> 登录注册 </template>
    </header-top>
    <!-- categroy -->
    <v-touch
      v-on:swipeleft="onSwipeLeft"
      v-on:swiperight="onSwipeRight"
      tag="div"
    >
      <div class="container">
        <div class="box">
          <div class="item" :class="{ hidden: index != 0 }">div</div>
          <div class="item" :class="{ hidden: index != 1 }">css</div>
          <div class="item" :class="{ hidden: index != 2 }">js</div>
        </div>
        <div class="Indicates">
          <span :class="{ cur: index == 0 }"></span>
          <span :class="{ cur: index == 1 }"></span>
          <span :class="{ cur: index == 2 }"></span>
        </div>
      </div>
    </v-touch>
    <div></div>
  </div>
</template>

<script>
import HeaderTop from "../../components/HeaderTop.vue";
import { getCategory } from "../../apis/observable/profile";
export default {
  data() {
    return { category: [], index: 0 };
  },

  components: { HeaderTop },

  computed: {},

  methods: {
    onSwipeLeft() {
      this.index < 2 ? this.index++ : this.index;
    },
    onSwipeRight() {
      this.index > 0 ? this.index-- : this.index;
    },
  },
  mounted() {
    this.category = getCategory();
  },
};
</script>
<style scoped>
.container {
  width: 100%;
  height: 185px;
  background-color: red;
  position: relative;
}
.container div {
  font-size: 15px;
}
.box {
  height: 100%;
  display: flex;
}
.item.hidden {
  display: none;
}
.item {
  width: 100%;
  height: 100%;
  flex: none;
}
.Indicates {
  bottom: 0px;
  position: absolute;
  z-index: 5;
  width: 100%;
  text-align: center;
  bottom: 10px;
}
.Indicates > span {
  display: inline-block;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: rgb(28, 170, 146);
  margin-right: 10px;
}
.Indicates > span.cur {
  background-color: pink;
}
</style>
